import React from 'react';
import { Typography } from 'antd';
import { MCPManager } from '../MCPManager';

const { Title } = Typography;

interface MCPConfig {
  configs: any[];
}

interface MCPConfigTabProps {
  config: MCPConfig;
  onChange: (config: MCPConfig) => void;
}

export const MCPConfigTab: React.FC<MCPConfigTabProps> = ({
  config,
  onChange
}) => {
  const handleConfigChange = (configs: any[]) => {
    onChange({ configs });
  };

  return (
    <div 
      style={{
        fontFamily: 'var(--eko-font-family-chinese)',
        fontSize: 'var(--eko-font-size-base)',
        lineHeight: 'var(--eko-line-height-base)',
      }}
    >
      <Title 
        level={3} 
        style={{
          fontFamily: 'var(--eko-font-family-chinese)',
          fontSize: 'var(--eko-font-size-lg)',
          fontWeight: 600,
          color: '#262626',
          marginBottom: '24px'
        }}
      >
        MCP 工具配置
      </Title>

      <div style={{ marginTop: '-16px' }}>
        <MCPManager 
          onConfigChange={handleConfigChange}
        />
      </div>
    </div>
  );
};